<template>
  <input type="text">
  <input type="text">
  <button>提交</button>
  <ul>
    <li v-for="(item, i) in data.arr" :key="item.id" @click="removeItem(i)">{{ item.name }}</li>
  </ul>
</template>

<script>
import { reactive } from 'vue'
export default {
  setup() {
    // !reactive 可以普通对象包装成响应式的对象
    const data = reactive({
      arr: [
        {
          id: 0,
          name: 'ifer',
        },
        {
          id: 1,
          name: 'elser',
        },
        {
          id: 2,
          name: 'xxx',
        },
      ],
    })

    const removeItem = (i) => {
      data.arr.splice(i, 1)
    }
    return { data, removeItem }
  }
}
</script>